<template>
  <div class="lunbo">
    <NewScroll class="scr" />
    <NewScroll class="scr" />
    <NewScroll class="scr" />
    <!-- 左侧图 -->
    <div class="leftImg">
      <img class="lbg" src="../assets/images/s05_05_pc.png" alt="" />
      <img class="let" src="../assets/images/img11_4_pc.png" alt="" />
      <img class="rit wow animate__animated animate__bounceIn animate__delay-1s" src="../assets/images/img08_3_pc.png" alt="" />
    </div>
    <!-- 轮播图 -->
    <div class="bg">
      <el-carousel arrow="always" :interval="0" v-if="!showM">
        <el-carousel-item>
          <lun1 />
        </el-carousel-item>
        <el-carousel-item>
          <lun2 />
        </el-carousel-item>
        <el-carousel-item>
          <lun3 />
        </el-carousel-item>
        <el-carousel-item>
          <lun4 />
        </el-carousel-item>
        <el-carousel-item>
          <lun5 />
        </el-carousel-item>
        <el-carousel-item>
          <lun6 />
        </el-carousel-item>
        <el-carousel-item>
          <lun7 />
        </el-carousel-item>
      </el-carousel>
      <!-- 当页面是移动端时显示静态 -->
      <div class="M" v-if="showM">
        <lun1 class="Mbg" />
        <lun2 class="Mbg" />
        <NewScroll class="scr" />
        <lun3 class="Mbg" />
        <NewScroll class="scr" />
        <lun4 class="Mbg" />
        <NewScroll class="scr" />
        <lun5 class="Mbg" />
        <NewScroll class="scr" />
        <lun6 class="Mbg" />
        <NewScroll class="scr" />
        <lun7 class="Mbg" />
        <NewScroll class="scr" />
      </div>
    </div>
  </div>
</template>

<script>
const NewScroll = () => import("../components/scroll/NewScroll.vue");
// 轮播图背景导入
const lun1 = () => import("../components/lun/lun1.vue");
const lun2 = () => import("../components/lun/lun2.vue");
const lun3 = () => import("../components/lun/lun3.vue");
const lun4 = () => import("../components/lun/lun4.vue");
const lun5 = () => import("../components/lun/lun5.vue");
const lun6 = () => import("../components/lun/lun6.vue");
const lun7 = () => import("../components/lun/lun7.vue");
export default {
  data() {
    return {
      imgs: [],
      width: "",
      showM: false, //控制轮播图再移动端更改为静态背景
    };
  },
  components: {
    NewScroll,
    lun1,
    lun2,
    lun3,
    lun4,
    lun5,
    lun6,
    lun7,
  },
  mounted() {
    this.width = window.screen.width;
    if (this.width < 500) {
      this.showM = true;
    }
  },
};
</script>

<style lang="less" scoped>
// 移动端静态图样式
.M {
  position: relative;
  width: 100%;
  .scr{
    float: left;
  }
  .Mbg {
    width: 400px;
    height: 330px;
    /deep/.bg1 {
      margin: 0 auto;
      width: 400px;
      height: 330px;
      background-size: 80%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.leftImg {
  position: absolute; //左侧图
  top: 50px;
  left: 0;
  @media screen and (max-width: 420px) {
    display: none;
  }
  .lbg {
    position: absolute;
    left: -1050px;
    top: -480px;
  }
  .let {
    position: absolute;
    left: -850px;
    top: -240px;
  }
  .rit {
    position: absolute;
    left: -380px;
    top: -200px;
  }
}
.bg1 {
  position: relative;
  left: 0;
  z-index: 100;
  img {
    position: relative;
  }
  .guo {
    top: -800px;
    left: 0;
  }
  .bg2 {
    top: -1500px;
    left: 0;
  }
  .shuzhuang {
    top: -2262px;
    left: 0;
  }
}
.lunbo {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  @media screen and (max-width: 420px) {
    height: 2400px;
  }
}
.scr {
  position: relative;
}
.bg {
  margin: 0 auto;
  /deep/.el-carousel__container {
    height: 780px;
    @media screen and (max-width: 420px) {
      height: 300px;
    }
  }
  position: absolute;
  top: 50px;
  // left: 85px;
  // margin: 0 auto;
  width: 1400px;
  height: 780px;
  // background: url("../assets/images/point_farm_pc.png") no-repeat;
  // background-size: 1280px 600px;
  // /deep/.el-carousel__item{
  //   height: 780px;
  // }
  @media screen and (max-width: 420px) {
    background-size: 100%;
    top: 0;
    left: 0;
    width: 380px;
    height: 2800px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /deep/.el-carousel__button {
    width: 20px;
    height: 20px;
    background-color: orange;
    border-radius: 50%;
    @media screen and (max-width: 420px) {
      width: 10px;
      height: 10px;
    }
  }
  /deep/.el-carousel__arrow--left {
    width: 90px;
    height: 90px;
    left: 20px;
    background: url("../assets/images/pager_l.png");
    box-shadow: 0 5px 3px #888686;
    i {
      display: none;
    }
    @media screen and (max-width: 420px) {
      display: none;
    }
  }
  /deep/.el-carousel__arrow--left:hover {
    left: 5px;
  }
  /deep/.el-carousel__arrow--right {
    z-index: 500;
    right: 150px;
    width: 90px;
    height: 90px;
    background: url("../assets/images/pager_r.png");
    box-shadow: 0 5px 3px #888686;
    i {
      display: none;
    }
    @media screen and (max-width: 420px) {
      display: none;
    }
  }
  /deep/.el-carousel__arrow--right:hover {
    right: 135px;
  }
  .txt {
    position: relative;
    right: 60px;
  }
  .boy {
    z-index: 200;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .boyBg {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .girl {
    position: absolute;
    left: -30px;
    top: 0;
  }
  .grBg {
    position: absolute;
    left: 150px;
    top: -50px;
  }
  .lAd {
    position: absolute;
    left: -20px;
    bottom: 0;
  }
  .rAd {
    position: absolute;
    right: -45px;
    bottom: 0;
  }
}
.lun {
  position: absolute;
  top: 0;
  left: 0;
}
</style>>